<template>
  <div class="clinic-content">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      size="small"
      label-width="78px"
    >
      <div class="nature clinic-common">
        <h3>诊所性质</h3>
        <div class="nature-con">
          <div class="left">
            <div class="left-radio">
              <el-radio v-model="ruleForm.radio" label="1">所属集团</el-radio>
              <el-radio v-model="ruleForm.radio" label="2">无所属集团</el-radio>
            </div>
            <div class="left-select">
              <el-select
                v-model="ruleForm.clinic"
                placeholder="请选择所属集团诊所"
                class="inputLab"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="right">
            <p>1、集团门诊下拉框自动回显系统中所有集团门诊的名称，为非必填、单选。</p>
            <p>2、选择后此门诊自动跟集团门诊进行关联，属于集团门诊下一角色权限。 </p>
            <p>3、集团入口新增该项直接所属集团名称。</p>
          </div>

        </div>
      </div>
      <div class="basic clinic-common">
        <h3>诊所性质</h3>
        <div class="common-flex">
          <el-form-item class="flex-avg" label="诊所名称" prop="clinicName">
            <el-input v-model="ruleForm.clinicName" class="input-width" placeholder="请输入诊所名称"></el-input>
          </el-form-item>
          <el-form-item class="flex-avg" label="诊所类型" prop="clinicType">
            <el-select
              v-model="ruleForm.clinicType"
              class="input-width"
              placeholder="请选择"
            >
              <el-option v-for="item in dict.clinic_type " :key="item.id" :label="item.label" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="common-flex">
          <el-form-item class="flex-avg" label="青苗/罗慕">
            <el-select
              v-model="ruleForm.conType"
              class="input-width"
              placeholder="请选择"
            >
              <el-option v-for="item in conTypeArr" :key="item.id" :label="item.label" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="areaFlex flex-avg">
            <el-form-item label="所在省市" prop="proCode">
              <el-select
                v-model="ruleForm.proCode"
                placeholder="省份"
                class="selectLab"
                @change="provinceChange"
              >
                <el-option
                  v-for="item in province"
                  :key="item.areaId"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="el-form-item1" prop="cityCode">
              <el-select
                v-model="ruleForm.cityCode"
                placeholder="城市"
                class="selectLab marginLab"
                @change="cityChange"
              >
                <el-option
                  v-for="item in city"
                  :key="item.areaId"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="el-form-item1" prop="areaCode">
              <el-select
                v-model="ruleForm.areaCode"
                placeholder="选择区"
                class="selectLab marginLab"
              >
                <el-option
                  v-for="item in area"
                  :key="item.areaId"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>

        </div>
        <div class="common-flex">
          <el-form-item class="flex-avg adress" label="详细地址" prop="address">
            <el-input v-model="ruleForm.address" class="input-width" placeholder="请输入详细地址"></el-input>
          </el-form-item>
        </div>
        <div class="common-flex">
          <el-form-item class="flex-avg" label="诊所联系人">
            <el-input v-model="ruleForm.contacts" class="input-width" placeholder="请输入联系人名称"></el-input>
          </el-form-item>
          <el-form-item class="flex-avg" label="联系电话" prop="mobile">
            <el-input v-model="ruleForm.mobile" class="input-width" placeholder="请输入联系电话"></el-input>
          </el-form-item>
        </div>
        <div class="common-flex">
          <el-form-item class="flex-avg" label="诊所店招" prop="logoUrl">
            <el-upload
              class="avatar-uploader"
              :action="uploadImgUrl"
              :on-remove="handleRemove"
              :on-success="uploadSuccess"
              list-type="picture"
              :show-file-list="false"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
            >
              <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar" />
              <div v-else>
                <img
                  class="avatar"
                  src="../../../../assets/images/girl.svg"
                  alt=""
                  style="width: 100px; margin-bottom: 16px"
                />
              </div>
            </el-upload>
          </el-form-item>
        </div>

      </div>
      <div class="admin clinic-common">
        <h3>账号管理员</h3>
        <div class="admin-con">
          <div class="common-flex">
            <el-form-item class="flex-avg" label="诊所管理员">
              <el-input v-model="ruleForm.managerName" class="input-width" placeholder="请输入管理员姓名"></el-input>
            </el-form-item>
            <el-form-item class="flex-avg" label="移动电话">
              <el-input v-model="ruleForm.managerMobile" class="input-width" placeholder="请输入移动电话"></el-input>
            </el-form-item>
          </div>
          <div class="common-flex">
            <el-form-item class="flex-avg" label="账单管理员">
              <el-input v-model="ruleForm.accManagerName" class="input-width" placeholder="请输入管理员姓名"></el-input>
            </el-form-item>
            <el-form-item class="flex-avg" label="移动电话">
              <el-input v-model="ruleForm.accManagerMobile" class="input-width" placeholder="请输入移动电话"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="market clinic-common">
        <h3>诊所所属销售</h3>
        <div class="admin-con">
          <div class="common-flex">
            <el-form-item class="flex-avg" label="所属大区" prop="areaId">
              <el-select
                v-model="ruleForm.areaCode"
                placeholder="请选择"
                class="selectLab marginLab"
              >
                <el-option
                  v-for="item in areaArr"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
              <!-- <el-input class="input-width" v-model="ruleForm.areaId" placeholder="请输入诊所名称"></el-input> -->
            </el-form-item>
            <el-form-item class="flex-avg" label="销售" prop="salesId">
              <el-select
                v-model="ruleForm.salesId"
                placeholder="请选择"
                class="selectLab marginLab"
              >
                <el-option
                  v-for="item in saleArr"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <p>选择完毕后显示此销售所在大区+该销售的所有上级主管领导名称（区销售总监+销售经理+销售+代理商（非必选））</p>
        </div>
      </div>
      <div class="take clinic-common">
        <h3>矫治器收货地址</h3>
        <div class="take-con">
          <div class="top-radio">
            <el-radio v-model="ruleForm.radio1" label="1">诊所地址</el-radio>
            <el-radio v-model="ruleForm.radio1" label="2">代理商</el-radio>
            <el-radio v-model="ruleForm.radio1" label="3">医生</el-radio>
            <el-radio v-model="ruleForm.radio1" label="4">其他</el-radio>
          </div>
          <div>
            <el-form-item class="flex-avg" label="收件信息" prop="groupName">
              <el-input v-model="ruleForm.groupName" class="input-width" placeholder="请输入诊所名称"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { saleArea } from '@/api/order';
import { clinicGroupIdSerach, clinicAdd} from '@/api/oper';
export default {
  name: '',
  props: ['groupId'],
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_LOG_API + 'api/aliOSS/uploadfile', // 上传接口
      ruleForm: {
        clinic: '',
        radio: 1,
        clinicName: '', // 诊所名称
        clinicType: '', // 诊所类型
        conType: '', // 青苗/罗慕
        proCode: '',
        cityCode: '',
        areaCode: '',
        address: '', // 详细地址
        contacts: '', // 诊所联系人
        mobile: '', // 联系电话
        logoUrl: '',
        managerName: '', // 诊所管理员
        managerMobile: '', // 诊所管理员手机号
        accManagerName: '', // 账单管理员
        accManagerMobile: '', // 账单管理员手机号
        salesId: '', // 所属销售
        areaId: '', // 大区
        radio1: ''
      },
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        ossaccessKeyId: '',
        dir: '',
        host: ''
      },
      conTypeArr: [
        {
          id: 0,
          label: '青苗'
        }, {
          id: 1,
          label: '罗慕'
        }
      ],
      areaArr: [
        {
          id: 0,
          label: '华南'
        },
        {
          id: 1,
          label: '华北'
        }
      ],
      saleArr: [
        {
          id: 0,
          label: '张三'
        },
        {
          id: 1,
          label: '李四'
        }
      ],
      rules: {
        clinicName: [
          { required: true, message: '请输入诊所名称', trigger: 'blur' }
        ],
        clinicType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        proCode: [
          { required: true, message: '选择省', trigger: 'change' }
        ],
        cityCode: [
          { required: true, message: '选择市', trigger: 'change' }
        ],
        areaCode: [
          { required: true, message: '选择区', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        logoUrl: [
          { required: true, message: '请输入诊所店招', trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请输入所属大区', trigger: 'blur' }
        ],
        salesId: [
          { required: true, message: '请输入所属销售', trigger: 'blur' }
        ]
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭' }
      ],
      province: [],
      city: [],
      area: []
    };
  },
  dicts: [
    'clinic_type' // 诊所性质
  ],
  computed: {
    user() {
      return this.$store.getters.user;
    }
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      this.initData();
    })
    
  },
  methods: {
    initData(callback) {
      // clinicGroupIdSerach(this.groupId)
      //   .then((res) => {
      //     console.log(res);
      //   });
      saleArea({ parentAreaId: '-1', sonlevel: '1' })
        .then((res) => {
          this.province = res;
          callback && callback(this.province);
        }).catch((er) => {});
    },
    addClinic() {
      this.ruleForm.createUser = this.user.id;
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          clinicAdd(this.ruleForm).then((e) => {
            // callback();
          });
        } else {
          console.log('err');
        }
      });
    },
    // 上传----------------------
    handleRemove(file, fileList) { // 删除文件
      this.uploadDisabled = fileList.length >= this.limitCount;
    },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      this.ruleForm.logoUrl = response.data.url;
      // this.formFiles.cbctPicture[0].fileUrl = response.data.url;
    },
    // 上传成功
    uploadRightSuccess(response, file, fileList) {
      console.warn(fileList);
      fileList.map(img => {
        this.draggableUpload.push({ imgUrl: img.response.data.url });
      });
      // this.mealForm.imgUrl = response.data.url;
    },
    // 省切换
    provinceChange(code, callback) {
      let parentAreaId = 0;
      this.ruleForm.cityCode = '';
      this.ruleForm.areaCode = '';
      this.province.forEach((item) => {
        if (item.code === code) {
          parentAreaId = item.areaId;
          saleArea({ parentAreaId, sonlevel: '2' })
            .then((res) => {
              this.city = res;
              callback && callback(this.city);
            })
            .catch((er) => {
              this.city = [];
            });
        }
      });
    },
    cityChange(code, callback) {
      let parentAreaId = 0;
      this.city.forEach((item) => {
        if (item.code === code) {
          parentAreaId = item.areaId;
          saleArea({ parentAreaId, sonlevel: '3' })
            .then((res) => {
              this.area = res;
              callback && callback();
            })
            .catch((er) => {
              this.area = [];
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
    .clinic-content{
        // padding: 0 60px;
        .common-flex{
            display: flex;
            justify-content: space-between;
            .flex-avg {
                flex: 1;
            }
            .avatar{
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
        }
        .input-width{
            width: 240px;
        }
        .clinic-common{
            margin-bottom: 30px;
            border-bottom: 1px solid #E6E6E6;
            h3{
                color:#333333;
                font-size: 16px;
                padding-left: 5px;
                border-left:3px solid #508FCC;
            }
        }
        .nature-con{
            display: flex;
            justify-content: space-between;

            padding-bottom: 20px;
            .left-select{
                margin-top: 10px;
            }
            .el-select{
                width: 240px;
            }
            .left{
                padding-top: 7px;
            }
            .right{
                p{
                    line-height:0;
                    margin-bottom: 20px;
                    color: #999999;
                    font-size: 14px;
                }
            }
        }
        .basic{
            .adress{
                .input-width{
                    width: 566px;
                }
            }
            .areaFlex{
                // display: flex;
                .el-form-item{
                    display: inline-block;
                    // margin-right: ;
                }
                .el-form-item1{
                    // width: 132px;
                    margin-left: 10px;
                    .el-form-item__content{
                        margin-left: 0!important;
                    }
                }
                .el-select{
                    width: 120px;
                }
            }
        }
        .admin{
            .admin-con{
                padding-bottom: 10px;
            }
            .el-form-item__label{
                width: 82px !important;
            }
        }
        .take{
            .top-radio{
                margin-bottom: 20px;
            }
        }

    }
</style>
